《HTML》- 如何成为一名前端开发之HTML入门

前端开发，入门简单，有一台可以运行多款浏览器的电脑，能联网查询资料即可。深入的部分，需要更多的理论知识、肯钻研的精神。
前端开发，需要入门了解的屈指可数，主要就是如下几个大方面：

背景知识

软件安装

文本编辑器

vscode(推荐使用，功能强大)
Sublime Text
NodePad++

浏览器

Firefox, Chrome, Opera, Safari, Internet Explorer and Microsoft Edge

版本控制

Git
GitHub

构建工具

Webpack
Gulp

Web standards

Web standards，主要定义浏览器端，功能接口标准的，标准的具体实现，由不同的浏览器厂商完成。

当下使用的web技术

主流浏览器

Firefox, Chrome, Opera, Safari, Internet Explorer and Microsoft Edge

协议

协议，主要用于通信。前后端不是独立的，彼此通过协议，互换信息，web系统才能运行正常

http
https
socket

HTML, CSS, and JavaScript

开发工具

各浏览的DevTool,便于调试
Linters插件
Minify工具
CDN等
测试工具
js库和前端框架（站点构建的更快、更高效）

服务端语言

Python, NodeJS, Deno, Go, Rust

面临的挑战

浏览器兼容

Web standards，各实现厂商不同，支持力度不同，浏览器兼容问题自然存在

响应式设计

厂商的不同，展示场景的不同，意味着不能全篇一律敲定，需要动态变化展示内容

性能

天下站点，只有快，才能留住用户

易用性

站点的访问人群不同，要具备普适性，都能轻松使用。

国际化

国际语言众多，需要尽可能的多支持

安全性

用户隐私数据保护

HTML

html基础概念

html元素

当然，也有例外，不是这种格式的

1 2	# Empty elements， or (void elements.) <img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

html元素嵌套

1	<p>My cat is <strong>very</strong> grumpy.</p>

块元素和行内元素

块元素，独占一行；行内元素，按先后顺序，排列
这些与css的display不同，不影响元素能包含哪些元素，能被哪些元素包含

元素属性

其中，也存在一种特殊的属性：Boolean attributes

1
2
3

<input type="text" disabled>
# 等效于
<input type="text" disabled="disabled">

另外，也会存在一些特殊的写法。推荐都是key=”value”形式

1	<a href=https://www.mozilla.org/>favorite website</a>

html文档结构

不管多少连续的空白，浏览器都会解析会一个空格

<!DOCTYPE html> # 定义解析格式
<html> # 文档的root 
  <head> #定义源数据地方 
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body> # 文档的可见内容部分
    <p>This is my page</p>
  </body>
</html>

元数据等请移步参考

html特殊字符

<, >,”,’ and &, 这是html自身使用的，如果用户需要展示，那么需要转义

(不好展示，&添加了空格,其实是没有的)

特殊字符	转义字符
<	& lt;
>	& gt;
“	& quot;
‘	& apos;
&	& amp;

html注释

1
2
3

<!-- 
 <p>I am!</p> 
-->

html 多媒体

image

普通的图片

alt描述图片

# 推荐添加alt,而不是text子元素节点添加
<img src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
         it has a large head with long sharp teeth">

caption添加标题

 <figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">
 <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

响应式图片

根据展示设备尺寸的不同，加载不同的图片

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

设备尺寸相同，但是分辨率不同

<img srcset="elva-fairy-320w.jpg,
            elva-fairy-480w.jpg 1.5x,
            elva-fairy-640w.jpg 2x"
    src="elva-fairy-640w.jpg"
    alt="Elva dressed as a fairy">

利用picture，不同设选择加载不同的图片

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

picture+svg

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

audio

单一url
浏览器厂商，针对音频的支持格式不是不同的，譬如： MP3, MP4 and WebM

1
2
3

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>

浏览器适配问题

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

video

单一url
浏览器厂商，针对视频的支持格式不是不同的

1
2
3

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>

浏览器适配问题

<video controls width="400" height="400"
       autoplay loop muted preload="auto" 
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

svg

image引用svg

<img 
    src="equilateral.svg" 
    alt="triangle with all three sides equal"
    height="87"
    width="100" />

html引用svg

1
2
3

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

iframe等中引用svg

1
2
3

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

canvas

canvas与svg不同，canvas基于像素,svg基于矢量图

1 2	#html <canvas id="my-canvas" width="600" height="400"></canvas>

嵌入元素

iframe, embed and object

iframe

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> 
    <a href="https://developer.mozilla.org/en-US/docs/Glossary">
       Fallback link for browsers that don't support iframes
    </a>
  </p>
</iframe>

html table

样式指定

<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>

更好的样式指定

col 一次指定即可

<table>
  <colgroup>
    <col> # 定义在colgroup中，与th个数对应
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

全部设置

1
2
3

<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>

参考

web-develop

本文作者：前端analysis

联系邮箱：cheonghu@126.com

Tags: js html css3

← 《Css3》- 如何成为一名前端开发者《Css3》- CSS进阶之媒介查询 →

赏

使用支付宝打赏

使用微信打赏

若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏